<template>
	<view class="article-box">
		<view class="article-box__title">{{title}}</view>
		<view class="article-box__summary">{{summary}}</view>
		<view v-if="imgList.length!=0" class="article-box__pic">
			<image v-if="imgList.length>1" v-for="url in imgList" :src="url" mode="widthFix" style="width: 33%;"></image>
			<image v-if="imgList.length==1" v-for="url in imgList" :src="url" mode="widthFix" style="width: 100%;"></image>
		</view>
		<view class="article-box__info">
			<view v-if="isTop">
				<u-tag text="置顶" shape="circle" size="mini" mode="dark" type="error" />
			</view>
			<view class="article-box__info__text"> {{readNum}} 阅读 · {{pubdate}}</view>
		</view>
		<u-line color="#e0e0e0" />
	</view>
</template>

<script>
	export default {
		name: "articleBox",
		props: {
			title: String,
			summary: String,
			isTop: Boolean,
			readNum:Number,
			pubdate: String,
			imgList:Array,
		},
		mounted() {

		},
		data() {
			return {

			};
		},
		methods: {

		},
	};
</script>

<style lang="less">
	@import '../custom.less';

	.article-box {
		margin: @uni-spacing-row-lg @uni-spacing-col-lg;

		&__title {
			font-size: @uni-font-size-subtitle;
			margin-bottom: @uni-spacing-row-base;
		}

		&__summary {
			font-size: @uni-font-size-paragraph;
			margin-bottom: @uni-spacing-row-base;
			word-break: break-all;
			text-overflow: ellipsis;
			display: -webkit-box;
			/** 对象作为伸缩盒子模型显示 **/
			-webkit-box-orient: vertical;
			/** 设置或检索伸缩盒对象的子元素的排列方式 **/
			-webkit-line-clamp: 2;
			/** 显示的行数 **/
			overflow: hidden;
			/** 隐藏超出的内容 **/
		}
		
		&__pic{
			margin-bottom: @uni-spacing-row-base;
		}

		&__info {
			margin-bottom: @uni-spacing-row-sm;
			display: flex;
			flex-direction: row;
			&__text{
				color: @uni-text-color-grey;
				margin-left: @uni-spacing-col-sm;
			}
		}
	}
</style>
